<template>
  <div>
    <div id="head">
      <van-icon size="25px" @click="toHead()" name="arrow-left"
                style="position: absolute;left: 10px;" />
      消息中心
    </div>
    <h2>消息</h2>
    <div>
      <van-cell-group>
        <van-cell id="cell" title="消息类型" value="工单消息" v-if="message.messageType==1" />
        <van-cell id="cell" title="消息类型" value="巡检提醒" v-if="message.messageType==2" />
        <van-cell id="cell" title="消息类型" value="运输消息" v-if="message.messageType==3" />
        <van-cell id="cell" title="消息内容" :value="message.messageContent" />
        <van-cell id="cell" title="级别"  v-if="message.messageLevel==2">
          <span style="color: red"><b>特急</b></span>
        </van-cell>
        <van-cell id="cell" title="级别" v-if="message.messageLevel==1">
          <span style="color: orange"><b>紧急</b></span>
        </van-cell>
        <van-cell id="cell" title="级别" v-if="message.messageLevel==3">
          <span style="color: #1989fa"><b>普通</b></span>
        </van-cell>
        <van-cell id="cell" title="创建时间" :value="message.createTime" />
        <van-cell id="cell" title="通知用户" :value="message.messagePeople" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data(){
    return{
      id:"",
      message:{},
    }
  },
  methods:{
    findById(){
      axios.post("http://localhost:9999/myModule-service/messageCenter/findById?id="+this.id).then(res=>{
        this.message = res.data;
      })
    },
    toHead(){
      this.$router.push({
        path:'/message',
      })
    }
  },
  created(){
    this.id = this.$route.query.id;
    this.findById();
  }
}
</script>

<style scoped>
#cell .van-cell__title {
  text-align: left;
  ::v-deep .van-icon {
    display: flex;
    align-items: center;
  }
}
#head{
  background-color: #f5f5f5;
  height: 30px;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
</style>
